<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Vue监测数据改变的原理——数组</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <h2>学校：{{school.name}}</h2>
            <h2>地址：{{school.address}}</h2>
            <h2 @click="showLeader" title="点击查看校长">校长：{{school.leader}}</h2>
            <hr>
            <button @click="addSex">添加又给性别属性，默认值是男</button>
            <h2>姓名：{{student.name}}</h2>
            <!-- 如果有性别，就展示，没有性别就不展示 -->
            <h2 v-if="student.sex">性别：{{student.sex}}</h2>
            <h2>年龄：真实年龄-{{student.age.real_age}} 对外年龄-{{student.age.speed_age}}</h2>
            <h2>朋友：</h2>
            <ul>
                <li v-for="(f, index) in student.friends" :key="index">
                    {{f.name}}--{{f.sex}}
                </li>
            </ul>
            <h2>朋友：</h2>
            <button @click="addHobby">添加一个爱好</button>
            <ul>
                <li v-for="(h, index) in student.hobbys" :key="index">
                    {{h}}
                </li>
            </ul>
        </div>
        <script type="text/javascript">
            Vue.config.productionTip = false    // 阻止Vue在启动时生成生产提示

            // 使用计算属性实现列表过滤
            const vm = new Vue({
                el: '#root',
                data: {
                    school: {
                        name: "清华",
                        address: '北京',
                    },
                    student: {
                        name: 'tom',
                        age: {
                            real_age: 28,
                            speed_age: 20
                        },
                        friends: [
                            {name: '张三', sex: '男'},
                            {name: '小花', sex: '女'}
                        ],
                        hobbys:['唱歌', '跳舞', '打篮球']
                    }
                },
                methods: {
                    addSex(){
                        Vue.set(this.student, 'sex', '男')
                    },
                    showLeader(){
                        Vue.set(this.school, 'leader', '小明')
                    },
                    addHobby() {
                        Vue.set(this.student.hobbys, 3, '五连鞭')
                        // this.student.hobbys.push('五连鞭')
                    }
                },
            })
        </script>
    </body>
</html>
